import React from 'react'
import {View, Text, Image} from '@tarojs/components'
import Taro from '@tarojs/taro'
import './Nav.scss'

interface Props {
  imageUrl?: string,
  text?: string,
  color?: string
  background?: string
  back?: () => void
}

const Nav: React.FC<Props> = React.memo((props) => {
  const {
    imageUrl, text, color = '#fff',
    back, children, background = 'transparent'
  } = props
  function onBack () {
    if (back) {
      back()
    } else {
      Taro.navigateBack({
        delta: 1
      })
    }
  }
  return <View className='nav' style={{color, background}}>
    <View className='back iconfont' onClick={onBack}>&#xe610;</View>
    {
      imageUrl ? <Image className='image' src={imageUrl} /> :
        children ? <View>{children}</View> : <Text className='text'>{text}</Text>
    }
  </View>
})

export default Nav
